<template>
    <!-- <div> -->
        <span class="status-dot"
        :class="setClor(processStatus)"
        >
           
        </span>
    <!-- </div> -->
</template>

<script>
    export default {
        name: 'ProcessDots',
        props:{
            processStatus:{
            type:String,
            default:'waiting'
          }
        },
        data() {
            return {
                
            }
        },
        methods:{
            setClor(val){
                switch (val) {
                    //待审核
                    case 'checkPending':
                    return 'orange'
                        break;
                        // 已完成-已通过
                        case 'finished':
                    return 'green'
                        break;
                        // 已驳回
                        case 'rejected':
                    return 'red'
                        break;
                        // 已取消
                        case 'canceled':
                    return 'gray'
                        break;
                        // 进行中-执行中
                        case 'running':
                    return 'blue'
                        break;
                    default:
                    return 'red'
                        break;
                }
                
            }
        }
    }
</script>

<style lang="scss" scoped>
      .status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
  }
  .orange {
    background-color: #FFBF00;
  }
  .blue {
    background-color: #0076FF;
  }

  .green {
    background-color: #00A854;
  }

  .gray {
    background-color: #BFBFBF;
  }

  .red {
    background-color: #EE3333;
  }
</style>